<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">


<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../static/userinfoPrivate/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../static/css/thesame.css" media="all">
    <link rel="stylesheet" href="../static/css/footer.css" media="all">
    <link rel="stylesheet" href="../static/css/drugs/rightCon.css" media="all">
    <link rel="stylesheet" href="../static/css/drugs/page.css" media="all">
    <!--    <link rel="stylesheet" href="../static/userinfoPrivate/layui/css/popCss.css" media="all">-->
</head>
<style>
    .dosage-con{ display: block }
    .dosage-con li{ flex: none; float: left; width: 33.33%; box-sizing: border-box; padding:0 }
    .dosage-con .per-look-dl{ padding:0 20px; }
    .dosage-con .per-look-dl dd{ width:60% }
    .dosage-con .per-look-dl .gray-con span{
        /*border: 1px solid #ff0;*/
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space:nowrap;
        width:96%;
        display:block;
        box-sizing: border-box;
    }
</style>
<script>
    var isReg = false;
    var isGrant = false;
</script>
<shiro:hasPermission name="yongyaoguanli_reg">
    <script>
        isReg = true;
    </script>
</shiro:hasPermission>

<shiro:hasPermission name="yongyaoguanli_grant">
    <script>
        isGrant = true;
    </script>
</shiro:hasPermission>

<body class="layui-layout-body">
<div class="layui-body pad12px">
    <!-- 内容主体区域 -->
    <div class="layui-box-con relative">
        <div class="layui-left-con layui-left-label-con pad12px">
            <div class="border-radius4 bgWhite box-shadows">
                <div class="new-add-box-scroll">
                    <nav class="label-nav-con">
                        <ul class="lh40px f14px" id="building">
                            <li class="current">全部</li>
                            <li th:each="list : ${buildingList}" th:id="${list.buildingNo}">[[${list.buildingName}]]</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="layui-right-con layui-right-label-con">
            <div class="border-radius4 bgWhite box-shadows">
                <div class="add-box-scroll">
                    <div class="border-bot5px border-radius4 pad25px">
                        <div class="new-add-title relative overflow mb15px"><span class="ml15px">药物预警（近七天）</span></div>
                        <div class="layui-tab layui-tab-child" style="margin: 0;">
                            <div class="layui-form" style="text-align: center!important;">
                                <ul class="layui-tab-title mei">
                                    <li value="1" class="layui-this">用量预警</li>
                                    <li value="2">有效期预警</li>
                                </ul>
                            </div>
                            <!--                  <div class="layui-tab-content bgWhite">
                                                  <div class="layui-tab-item layui-show">
                                                      <div class="layui-carousel" id="slide1">
                                                          <div carousel-item id="data">

                                                          </div>
                                                      </div>

                                                  </div>

                                                  <div class="layui-tab-item">
                                                      <article class="mb25px">

                                                      </article>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>-->
                            <div class="layui-tab-content bgWhite">
                                <div class="layui-tab-item layui-show">
                                    <div class="layui-carousel" id="slide1">
                                        <div carousel-item id="data">

                                        </div>
                                    </div>
                                </div>
                                <div class="layui-tab-item">
                                    <div class="layui-carousel" id="slide2">
                                        <div carousel-item id="data2">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="layui-tab layui-tab-time" lay-filter="give" style="margin: 10px 0 0;">
                            <div class="layui-form">
                                <ul class="layui-tab-title pl25px san">
                                    <li class="layui-this" value="1">药物登记</li>
                                    <li value="2">药物发放</li>
                                </ul>
                            </div>
                            <div class="layui-tab-content bgWhite pad25px">
                                <!--                                <div class="layui-tab-item">1111</div>-->
                                <div class="mb25px border-bot1px">
                                    <div class="add-mess-flex">
                                        <div class="add-mess-child">
                                            <div>
                                                <label>楼层：</label>
                                            </div>
                                            <div class="add-mess-form">
                                                <p>
                                                    <select name="" id="floor" class="form-select">
                                                        <option value=''>请选择</option>
                                                    </select>
                                                </p>
                                            </div>
                                        </div>
                                        <div class="add-mess-child">
                                            <div>
                                                <label>房间号：</label>
                                            </div>
                                            <div class="add-mess-form">
                                                <p>
                                                    <input type="text" id="roomName" placeholder="请输入" max="10">
                                                </p>
                                            </div>
                                        </div>
                                        <div class="add-mess-child">
                                            <div>
                                                <label>床号：</label>
                                            </div>
                                            <div class="add-mess-form">
                                                <p>
                                                    <input type="text" id="bedName" placeholder="请输入" maxlength="10">
                                                </p>
                                            </div>
                                        </div>
                                        <div class="add-mess-child">
                                            <div>
                                                <label>姓名：</label>
                                            </div>
                                            <div class="add-mess-form">
                                                <p>
                                                    <input type="text" id="userName" placeholder="请输入" maxlength="20">
                                                </p>
                                            </div>
                                        </div>
                                        <div class="add-mess-child">
                                            <p class="layui-btn" id="serchBtn" style="margin-left: 95px;">查&nbsp;询</p>
                                            <p class="layui-btn layui-btn-primary" id="reset" onclick="reset()">重&nbsp;置</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-tab-item layui-show">
                                    <!-- 药物发放-查看 -->
                                    <article>
                                        <div class="lh32px mb20px overflow add-btn-input">
                                            <p class="right">
                                                <span>共有<em class="red fb ml5px mr5px" id="count"></em>人</span>
                                            </p>
                                        </div>
                                        <div class="border1px border-radius4 relative">
                                            <table class="layui-hide" id="test2" lay-filter="test"></table>
                                        </div>
                                    </article>
                                </div>

                                <div class="layui-tab-item">
                                    <!-- 药物发放-查看 -->
                                    <article>
                                        <div class="lh32px mb20px overflow add-btn-input">
                                            <p class="right">
                                                <span>共有<em class="red fb ml5px mr5px" id="count2"></em>人</span>
                                            </p>
                                        </div>
                                        <div class="border1px border-radius4 relative">
                                            <table class="layui-hide" id="test1" lay-filter="test"></table>
                                        </div>
                                    </article>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../static/js/jquery-2.1.3.min.js"></script>
<script src="../static/layui/layui.js" charset="utf-8"></script>
<script>

    $(function () {

        //标签选中样式
        $('.label-nav-con li').click(function () {
            $(this).addClass('current').siblings().removeClass('current');
            var building = $(this).attr("id");
            getFloor(building);
            getData(building);
        });


        loadWarning(1);
        loadWarning(2);

        layui.use(['element', 'form', 'laydate', 'table', 'carousel'], function () {
            var laydate = layui.laydate;
            var table = layui.table;
            var carousel = layui.carousel;
            carousel.render({
                elem: '#slide1'
                , width: '' //设置容器宽度
                , height: '150px'
                , arrow: 'always' //始终显示箭头
                , interval: '3000'
                //,anim: 'updown' //切换动画方式
                , indicator: 'none'
            });

            carousel.render({
                elem: '#slide2'
                , width: '' //设置容器宽度
                , height: '150px'
                , arrow: 'always' //始终显示箭头
                , interval: '3000'
                //,anim: 'updown' //切换动画方式
                , indicator: 'none'
            });

            laydate.render({
                elem: '.test-item',
                trigger: 'click',
            });
        });

        getData("");

        $("#serchBtn").click(function () {
            var building = $('.label-nav-con li.current').attr("id");
            getData(building);
        })

    });

    function getData(building) {
        layui.use(['element', 'form', 'laydate', 'table', 'carousel'], function () {
            var element = layui.element;
            var table = layui.table;

            var floor = $("#floor").val();
            var userName = $("#userName").val();
            var roomName = $("#roomName").val();
            var bedName = $("#bedName").val();
            //第一个实例
            table.render({
                elem: '#test2'
                , url: "../medicine/pagedQueryOldManInfoData"
                , where: {buildingNo: building, floor: floor, userName: userName, roomName: roomName, bedName: bedName}
                // , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                // , toolbar: true
                // , defaultToolbar: []
                , request: {
                    pageName: 'pageNum' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                //,count: 10  //数据总数，从服务端得到
                //,data: listData
                , page: true //开启分页
                , limit: 10 //每页显示的条数
                //,limits:[3,4,5]
                , groups: 9 //连续页码个数
                , parseData: function (res) {
                    console.log(res);
                    return {
                        "code": res.code,
                        "data": res.data.data,
                        "count": res.data.totalRecord,
                        "limit": 10,
                    };
                },
                cols: [
                    [ //表头
                        {
                            field: 'buildingName',
                            title: '楼苑',
                        }, {
                        field: 'roomName',
                        title: '房间号',
                    }, {
                        field: 'bedName',
                        title: '床号',
                    }, {
                        field: 'userName',
                        title: '姓名',
                    }, {
                        field: 'userSex',
                        title: '性别',
                    }, {
                        field: 'contactName',
                        title: '紧急联系人',
                    }, {
                        field: 'mobile',
                        title: '联系方式',
                    }, {
                        field: 'city',
                        title: '操作',
                        style: 'color:#1C9399;',
                        fixed: 'right',
                        width: 140,
                        templet: function (res) {
                            if (isReg) {
                                return "<div class='table-list-btn content'><span class='cursor' onclick=\"dengji('" + res.userNo + "')\">药物登记</span></div>"
                            } else {
                                return "<div class='table-list-btn content'><span style=\"color: #eee; class=\"cursor\">药物登记</span></div>"
                            }
                        }
                    }]
                ], done: function (res, curr, count) {
                    $("#count").text(count);
                }
            });


            //第二个实例
            table.render({
                elem: '#test1'
                , url: "../medicine/pagedQueryOldManInfoData"
                , where: {buildingNo: building, floor: floor, userName: userName, roomName: roomName, bedName: bedName}
                // , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                // , toolbar: true
                // , defaultToolbar: []
                , request: {
                    pageName: 'pageNum' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                //,count: 10  //数据总数，从服务端得到
                //,data: listData
                , page: true //开启分页
                , limit: 10 //每页显示的条数
                //,limits:[3,4,5]
                , groups: 9 //连续页码个数
                , parseData: function (res) {
                    console.log(res);
                    return {
                        "code": res.code,
                        "data": res.data.data,
                        "count": res.data.totalRecord,
                        "limit": 10,
                    };
                },
                cols: [
                    [ //表头
                        {
                            field: 'buildingName',
                            title: '楼苑',
                        }, {
                        field: 'roomName',
                        title: '房间号',
                    }, {
                        field: 'bedName',
                        title: '床号',
                    }, {
                        field: 'userName',
                        title: '姓名',
                    }, {
                        field: 'userSex',
                        title: '性别',
                    }, {
                        field: 'contactName',
                        title: '紧急联系人',
                    }, {
                        field: 'mobile',
                        title: '联系方式',
                    }, {
                        field: 'city',
                        title: '操作',
                        style: 'color:#1C9399;',
                        fixed: 'right',
                        width: 140,
                        templet: function (res) {
                            if (isGrant) {
                                return "<div class='table-list-btn content'><span class='cursor' onclick=\"fafang('" + res.userNo + "')\">药物发放</span></div>"
                            } else {
                                return "<div class='table-list-btn content'><span style=\"color: #eee; class=\"cursor\">药物发放</span></div>"
                            }
                        }

                    }]
                ], done: function (res, curr, count) {
                    $("#count2").text(count);
                }
            });

        });
    }


    //加载用量预警或有效期预警
    function loadWarning(flag) {
        var data = {flag: flag};
        $.ajax({
            url: "../medicine/getWarningList",
            type: "get",
            dataType: "json",
            data: data,
            async: false,
            success: function (data) {
                var html = "";
                if (data.code == 200) {
                    if (data.data.length > 0) {
                        for (var i = 0; i < data.data.length; i++) {
                            html += "<div><ul class=\"dosage-con\">";
                            for (var j = 0; j < data.data[i].length; j++) {
                                if (isNull(data.data[i][j].img)) {
                                    html += "<li><dl class=\"per-look-dl\"><dt><img src='../static/img/defaultHead.jpg' class=\"block\"></dt>"
                                } else {
                                    html += "<li><dl class=\"per-look-dl\"><dt><img src='" + data.data[i][j].img + "' class=\"block\"></dt>"
                                }
                                html += "<dd><div class=\"overflow\"><p class=\"left\"><span>" + data.data[i][j].userName + "</span></p>"
                                html += "<p class=\"right\"><span class=\"green cursor\" onclick=\"dengji('" + data.data[i][j].userNo + "')\">查看</span></p>"
                                html += "</div><div class=\"gray-con\"><span class=\"border-bggray\">" + data.data[i][j].build + "-" + data.data[i][j].room + "-" + data.data[i][j].bed + "</span>" +
                                    "</div><div class=\"gray gray-con\">"
                                html += "<span>药品：" + data.data[i][j].meicineName + "</span></div>"
                                if (flag == 1) {
                                    html += "<div class=\"gray\"><span>药量结束时间：</span><span>" + data.data[i][j].userEndDtate + "</span>"
                                } else if (flag == 2) {
                                    html += "<div class=\"gray\"><span>药量有效期时间：</span><span>" + data.data[i][j].validityDate + "</span>"
                                }
                                html += "</div></dd></dl></li>"
                            }
                            html += "</ul></div>"
                        }
                    } else {
                        html += "<ul class=\"dosage-con\"><li>暂无数据！</li></ul>";
                    }
                } else {
                    html += "<tr><td colspan='5'>获取列表失败！</td></tr>";
                }
                if (flag == 1) {
                    $("#data").html(html);
                } else if (flag == 2) {
                    $("#data2").html(html);
                }
            }
        });
    }

    //获取楼层
    function getFloor(buildNo) {
        var data = {buildNo: buildNo};
        $.ajax({
            url: "../medicine/getFloor",
            type: "get",
            dataType: "json",
            data: data,
            async: false,
            success: function (data) {
                var html = "";
                if (data.code == 200) {
                    html += "<option value=''>请选择</option>"
                    if (data.data.length > 0) {
                        for (var i = 0; i < data.data.length; i++) {
                            html += "<option value='" + data.data[i].floorNo + "'>" + data.data[i].floorName + "</option>"
                        }
                    }
                }
                $("#floor").html(html);
            }
        });
    }

    function dengji(userNo) {
        window.location.href = "../medicine/toGrantPage?userNo=" + userNo + "&flag=1";
    }

    function fafang(userNo) {
        window.location.href = "../medicine/toGrantPage?userNo=" + userNo + "&flag=2";
    }

    function reset() {
        $("#floor").val("");
        $("#userName").val("");
        $("#roomName").val("");
        $("#bedName").val("");
        getData();
    }

    function isNull(value) {
        return value == null || value === "" || value === undefined;
    }


</script>
</body>

</html>
